<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
          :checked-value="1"
          unchecked-value="2"
          @change="changeStatus($event, record.id)"
          :default-checked="record.status == 1"
        />
      </template>
      <!-- 操作前置扩展 -->
      <template #operationBeforeExtend="{ record }" v-if="! isRecovery">
        <a-link @click="openParamsList(record, 'response')"><icon-left /> 出参</a-link>
        <a-link @click="openParamsList(record, 'request')"><icon-right /> 入参</a-link>
      </template>
    </ma-crud>

    <params-list ref="paramslist" />
  </div>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'
  import api from '@/api/system/api'
  import { Message } from '@arco-design/web-vue'
  import ParamsList from './paramsList.vue'

  const crudRef = ref()
  const paramslist = ref()

  let isRecovery = computed(() => crudRef.value ? crudRef.value.isRecovery : false )

  const changeStatus = async (status, id) => {
    const response = await api.changeStatus({ id, status })
    if (response.success) {
      Message.success(response.message)
    }
  }

  const openParamsList = (row, type) => {
    paramslist.value.open(row, type)
  }

  const defaultResponse = `{
  code: 200,
  success: true,
  message: '请求成功',
  data: []
}`

  const crud = reactive({
    api: api.getList,
    recycleApi: api.getRecycleList,
    showIndex: false,
    pageLayout: 'fixed',
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 260,
    add: { show: true, api: api.save, auth: ['system:api:save'] },
    edit: { show: true, api: api.update, auth: ['system:api:update'] },
    delete: {
      show: true,
      api: api.deletes, auth: ['system:api:delete'],
      realApi: api.realDeletes, realAuth: ['system:api:realDeletes']
    },
    recovery: { show: true, api: api.recoverys, auth: ['system:api:recovery']},
    formOption: {
      id: 'apiManage',
      width: '850px',
      viewType: 'tag',
      tagId: 'apiForm',
      tagName: '接口',
      titleDataIndex: 'name',
      layout: [
        {
          formType: 'tabs',
          tabs: [
            { 
              title: '基础信息',
              formList: [
                { dataIndex: 'group_id' },
                { dataIndex: 'name' },
                { dataIndex: 'access_name' },
                { dataIndex: 'request_mode' },
                { dataIndex: 'class_name' },
                { dataIndex: 'method_name' },
                { dataIndex: 'status' },
                { dataIndex: 'auth_mode' },
                { dataIndex: 'remark' },
              ]
            },
            { 
              title: '其他信息',
              formList: [
                { dataIndex: 'description' },
                { dataIndex: 'response' },
              ]
            }
          ]  
        },
      ]
    }
  })

  const columns = reactive([
    {
      title: '所属组', dataIndex: 'group_id', search: true, commonRules: [{ required: true, message: '所属组必选' }],
      formType: 'select', dict: { url: 'system/apiGroup/list', props: { label: 'name', value: 'id' }, translation: true },
      width: 140
    },
    {
      title: '接口名称', dataIndex: 'name', search: true, commonRules: [{ required: true, message: '应用名称必填' }],
      width: 150,
    },
    {
      title: '访问名称', dataIndex: 'access_name', width: 140,
      commonRules: [{ required: true, message: '访问名称必填' }],
      extra: '接口实际访问的路由，可以使用"."来区分层级，不支持"/"'
    },
    {
      title: '请求模式', dataIndex: 'request_mode', search: true, formType: 'select',
      commonRules: [{ required: true, message: '请求模式必选' }],
      dict: { name: 'request_mode', props: { label: 'title', value: 'key' }, translation: true },
      width: 140,
    },
    {
      title: '类名称', dataIndex: 'class_name', commonRules: [{ required: true, message: '类名称必填' }],
      width: 150,
    },
    {
      title: '方法名称', dataIndex: 'method_name', commonRules: [{ required: true, message: '方法名称必填' }],
      width: 150,
    },
    {
      title: '状态', dataIndex: 'status', search: true, formType: 'radio',
      dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
      addDefaultValue: '1', width: 80,
    },
    {
      title: '认证模式', dataIndex: 'auth_mode', formType: 'radio',
      dict: { data: [{ label: '简易模式', value: 1 }, { label: '复杂模式', value: 2 }], translation: true },
      addDefaultValue: 1, width: 130
    },
    {
      title: '应用介绍', dataIndex: 'description', hide: true, formType: 'editor', height: 300,
    },
    {
      title: '返回示例', dataIndex: 'response', hide: true, formType: 'code-editor', height: 300,
      addDefaultValue: defaultResponse,
    },
    {
      title: '备注', dataIndex: 'remark', hide: true, formType: 'textarea',
    },
    {
      title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
      width: 180,
    },
  ])
</script>

<script>
export default { name: 'system:api' }
</script>

<style scoped>

</style>
